<template>
  <div class="app-container">
    <el-card>
      <div class="head-container">
        <el-button
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAddRoot"
        >新增一级类目
        </el-button>
      </div>
      <div style="display: flex">
        <el-tree
          :data="treeData"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :highlight-current="true"
          :props="defaultProps"
          @node-click="handleQueryType"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>
              {{ data.nccStuName ? `(${data.nccStuCode})` + data.nccStuName : data.stuClassName }}
            </span>
            <span>
              <el-button
                v-if="data.children"
                size="mini"
                type="text"
                @click="append('add',data)"
              >
                <i class="el-icon-plus"></i>
                添加子类
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click.stop="append('edit', data)"
              >
                <i class="el-icon-edit"></i>
                修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click.stop="handleDelete(data)"
              >
                <i class="el-icon-delete"></i>
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
        <el-table :data="goodTypeList" border height="605px">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="stoName" label="仓库名称" align="center"></el-table-column>
          <el-table-column prop="stoAreaName" label="库区名称" align="center"></el-table-column>
        </el-table>
      </div>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum"
                     :page-size="pageSize"
                     :page-sizes="[10, 20, 50,100]" :total="total">
      </el-pagination>
      <!--    新增子-->
      <wareAdd ref="wareAddRef" :visible.sync="visible" @addSuccess="addSuccess"/>
      <!--    新增父-->
      <wareFu ref="wareFuRef" :visible.sync="visibleFu" @addSuccess="addSuccess"/>
    </el-card>
  </div>
</template>

<script>
import wareAdd from "@/components/waresSort/wareAdd.vue"
import wareFu from '@/components/BasicInformation/goodTypeAdd.vue'
import {
  findTreeSkuTypeData,
  skuTypeDelete,//删除
  updateSkuTypeStatus,//子类删除,
  findBasicSkuTypeDetailByClassId,//查询关联
} from '@/api/basic/PersonnelInformation.js'

export default {
  name: "ProductType",
  components: {
    wareAdd,//子
    wareFu,//父
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单标题
      title: "",
      // 类目列表
      treeData: [],
      // 表单参数
      form: {},
      visible: false,
      visibleFu: false,
      // 默认属性
      defaultProps: {
        children: 'children',
        label: 'nccStuName'
      },
      goodTypeList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(newsize) {
      this.pageNum = 1
      this.pageSize = newsize
      this.getTable();
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage
      this.getTable();
    },
    //点击树
    handleQueryType(event, nodeData) {
      let param = {
        stuClassId: event.stuClassId
      }
      if (event.stuClassId) {
        this.getTable(param);
      }
    },
    //获取table
    getTable(data) {
      findBasicSkuTypeDetailByClassId(data).then(res => {
        this.goodTypeList = res.rows;
        this.total = res.total;
      })
    },
    //新增父级
    handleAddRoot() {
      this.visibleFu = true;
      this.$refs.wareFuRef.openDialog();
    },
    // 处理添加/编辑操作
    append(type, data) {
      if (type === 'add') {
        // 添加子类目
        this.$refs.wareAddRef.openDialog(type, data);
        this.visible = true;
      } else if (type === 'edit') {
        // 判断是父级还是子级
        if (data.parentClassId === 0 || !data.parentClassId) {
          // 父级类目编辑
          this.visibleFu = true;
          this.$refs.wareFuRef.openDialog(type, data);
        } else {
          // 子级类目编辑
          this.visible = true;
          this.$refs.wareAddRef.openDialog(type, data);
        }
      }
    },
    // 查询类目列表
    getList() {
      this.loading = true;
      findTreeSkuTypeData().then(response => {
        this.treeData = response.data;
        this.loading = false;
      });
    },
    //新增/修改后刷新列表
    addSuccess() {
      this.getList();
    },
    // 删除类目
    handleDelete(data) {
      // 统一确认对话框
      this.$confirm(`确认要进行删除操作吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 根据父级ID判断操作类型
        if (data.parentClassId === 0 || !data.parentClassId) {
          // 父级删除逻辑
          return skuTypeDelete({id: data.id}).then(res => {
            this.$message.success(res.msg);
            this.getList();
          });
        } else {
          // 子级状态变更逻辑
          updateSkuTypeStatus(data.id).then(res => {
            this.$message.success(res.msg);
            this.getList(); // 确保这个方法名正确
          });
        }
      }).catch(error => {
        // 只有当用户点击取消时才显示"已取消"
        if (error !== 'cancel') {
          this.$message.error('操作失败: ' + error.message);
        } else {
          this.$message.info('已取消');
        }
      });
    },
  }
};
</script>

<style scoped>
.head-container {
  margin-bottom: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-button + .el-button {
  margin-left: 8px;
}

.el-pagination {
  float: right;
  margin: 20px;
}

/* 添加停用状态的样式 */
.el-tree-node.is-disabled > .el-tree-node__content {
  color: #C0C4CC;
  cursor: not-allowed;
}

.el-tree {
  width: 400px;
  height: 615px;
  overflow-y: auto;
  margin-right: 10px;
}
</style>
